<template>
  <div ref="info" class="box-card">
    <i class="el-icon-close closeRight" @click.stop="clearJumpId" />
    <div class="head-box-card padding20 clearfix">
      <el-row>
        <el-col :span="2" class="user_headimg">
          <img :src="member.headPortrait" alt="无法显示" >
        </el-col>
        <el-col :span="16">
          <span class="user_name">会员昵称：{{ member.nickName }}</span>
        </el-col>
        <el-col :span="6">
          <el-button v-if="accreditChildren.editorSale" type="primary" @click="jumpId">编 辑</el-button>
        </el-col>
      </el-row>
      <el-row class="top_cus_info">
        <el-col :offset="2" :span="6">
          <p>成长值</p>
          <p>{{ member.growthvalue }}</p>
        </el-col>
        <el-col :span="6">
          <p>会员等级</p>
          <p>{{ member.levelName }}</p>
        </el-col>
        <el-col :span="6">
          <p>注册时间</p>
          <p>{{ member.creationTime }}</p>
        </el-col>
      </el-row>
    </div>
    <div class="height3" />
    <div v-if="showInfo" class="padding20">
      <el-col :span="15">
        <el-card shadow="never">
          <el-steps :active="activeSaleStage" align-center>
            <template v-if="dics.SALES_PHASE && dics.SALES_PHASE.children">
              <el-step
                v-for="(item,index) in dics.SALES_PHASE.children"
                :key="item.id"
                :title="item.dicName"
                @click.native="on_click(index,item.dicCode)"
              />
            </template>
          </el-steps>
          <el-tabs v-model="activeName">
            <el-tab-pane label="会员信息" name="first">
              <el-card class="box-card" style="font-size:16px;">
                <el-row :gutter="20">
                  <el-col :span="12">真实姓名：{{ member.fullName }}</el-col>
                  <el-col :span="12">性别：{{ member.sex==0?'男':'女' }}</el-col>
                </el-row>
                <el-row :gutter="20">
                  <el-col :span="12">手机号：{{ member.phone }}</el-col>
                  <el-col :span="12">所在地：{{ member.province }} {{ member.city }} {{ member.county }}</el-col>
                </el-row>
                <el-row :gutter="20">
                  <el-col :span="12">公司：{{ member.company }}</el-col>
                  <el-col :span="12">职务：{{ member.job }}</el-col>
                </el-row>
                <el-row :gutter="20">
                  <el-col :span="12">身份证号：{{ member.id_number }}</el-col>
                  <el-col :span="12">来源：{{ member.source }}</el-col>
                </el-row>
              </el-card>
            </el-tab-pane>
            <el-tab-pane label="浏览记录" name="second">
              <el-select v-model="searchType" placeholder="请选择">
                <el-option
                  v-for="item in options"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                />
              </el-select>
              <el-table
                ref="multipleTable"
                :data="tableData"
                max-height="260"
                style="overflow-y:auto;"
                tooltip-effect="dark"
              >
                <el-table-column label="商机名称" show-overflow-tooltip prop="dataName" />
                <el-table-column label="浏览时间" show-overflow-tooltip prop="creationTime" />
              </el-table>
              <Pagination
                style="marginTop:10px;"
                class="right"
                :total-count="totalCount"
                :page-size="page.pageNo"
                :current-page="page.pageSize"
                @handleSizeChange="handleSizeChange"
                @handleCurrentChange="handleCurrentChange"
              />
            </el-tab-pane>
          </el-tabs>
        </el-card>
      </el-col>
      <el-col :span="9">
        <DynamicState
          v-if="dics.SALE"
          :id="$props.id"
          style="margin-left:10px;"
          :dics-arr="dics.SALE.children"
          :work-dynamics-arr="workDynamicsArr"
          data-type="销售动态"
        />
      </el-col>
    </div>
  </div>
</template>
<script>
import mmUrl from '~/utils/utilUrl';
import { createDics } from '~/utils/util';
import Pagination from '~/components/commom/pagination';
import DynamicState from '~/components/enterprise/dynamicState';
export default {
  components: {
    DynamicState,
    Pagination
  },
  props: ['id', 'pageHeight', 'updateRight', 'accreditChildren'],
  data() {
    return {
      showInfo: false,
      member: {},
      workDynamicsArr: [],
      dicsArr: [],
      dics: {},
      item: {},
      options: [
        {
          value: 0,
          label: '商机'
        },
        {
          value: 1,
          label: '直播'
        },
        {
          value: 2,
          label: '资讯'
        }
      ],
      loading: true,
      activeName: 'first',
      page: {
        maxResultCount: 0,
        pageNo: 0,
        pageSize: 20,
        skipCount: 0
      },
      totalCount: 0,
      tableData: [],
      activeSaleStage: 0,
      searchType: 0
    }
  },
  watch: {
    id(newd) {
      this.getInitData()
    },
    updateRight() {
      this.getInitData()
    },
    searchType(nwed) {
      this.getBrowseRecords()
    }
  },
  mounted() {
    this.getInitData()
  },
  methods: {
    clearJumpId() {
      this.$emit('clearJumpId')
    },
    jumpId() {
      this.$emit('editor')
    },
    getInitData() {
      this.$post({
        url: mmUrl.sales.loadView,
        data: {
          id: this.$props.id
        }
      }).then(res => {
        this.item = res.item
        this.member = res.member
        this.workDynamicsArr = res.workDynamics.items
        this.dicsArr = res.dics
        this.dics = createDics(this.dicsArr, 'dicCode')
        if (this.dics.SALES_PHASE) {
          var index = 0
          this.dics.SALES_PHASE.children.forEach(element => {
            index++
            if (this.item.salesStage == element.dicCode) {
              this.activeSaleStage = index - 1
            }
          })
        }
        this.getBrowseRecords()
        this.showInfo = true
        this.$nextTick(() => {
          this.$refs['info'].style.height = this.$props.pageHeight + 'px';
        })
      })
    },
    getBrowseRecords() {
      this.$post({
        url: mmUrl.browseRecord.getBrowseRecords,
        data: {
          memberId: this.item.memberId,
          type: this.searchType,
          page: this.page
        }
      })
        .then(res => {
          this.totalCount = res.items.totalCount
          this.tableData = res.items.items
        })
        .catch(err => this.$message.error(err))
    },
    handleSizeChange(val) {
      this.page.pageSize = val
      this.getBrowseRecords()
    },
    handleCurrentChange(val) {
      this.page.pageNo = val
      this.getBrowseRecords()
    },
    on_click(index, dicCode) {
      this.activeSaleStage = index
      this.member.salesStage = dicCode
      this.$post({
        url: mmUrl.sales.changeSale,
        data: {
          item: {
            id: this.$props.id,
            salesStage: this.member.salesStage
          }
        }
      })
        .then(res => {
          this.$message({ type: 'success', message: '操作成功' })
        })
        .catch(err => this.$message.error(err))
    }
  }
}
</script>
  <style lang="scss">
.only_margin20 {
  & > div:first-of-type {
    box-sizing: border-box;
    padding-right: 10px;
  }
}

.dynamic_list {
  color: rgb(140, 159, 178);

  a {
    color: rgb(45, 149, 203);
  }
}

.user_name {
  margin-right: 15px;
}

.top_cus_info {
  .el-col > p:first-of-type {
    color: rgb(142, 160, 177);
  }
}

.user_headimg img {
  width: 60px;
  height: 60px;
  border-radius: 5px;
}

.top_cus_info {
  margin-top: 10px;

  div {
    text-align: left;
    line-height: 20px;
  }
}
</style>
